<template>
  <q-page class="row no-wrap">
    <page-left-menu
      :title="$t('analytics.title')"
      class="page-menu"
      color="#FFAA00"
      :menus="menus"
      @onChange="onMenuChange"
    />
    <q-scroll-area class="page-scroll q-pa-md">
      <router-view v-if="currentUser" />
      <guest-view v-else />
    </q-scroll-area>
  </q-page>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import PageLeftMenu from 'layouts/components/PageLeftMenu.vue';
import { PageLeftItem } from 'layouts/components/PageLeftItem';
import GuestView from 'pages/guests/Connections.vue';
import { useUserStore } from 'src/stores/user-store';

const userStore = useUserStore();
const currentUser = computed(() => userStore.currentUser);
const router = useRouter();
const menus = ref<PageLeftItem[]>([
  { label: 'analytics.overview', routeName: 'Overview' },
  { label: 'analytics.audience', routeName: 'Audience' },
  { label: 'analytics.insights', routeName: 'Insights' },
]);
async function onMenuChange(info: PageLeftItem) {
  await router.replace({ name: info.routeName });
}
</script>
